<template>
  <!-- 搜索框 -->
  <div>
    <nut-searchbar v-model="searchValue"></nut-searchbar>
  </div>
  <!-- 菜单 -->
  <div>
    <nut-menu>
      <nut-menu-item v-model="state.value1" :options="state.options1" />
      <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
    </nut-menu>
  </div>
  <!-- 轮播图 -->
  <view>
    <nut-swiper
      :init-page="page"
      :pagination-visible="true"
      pagination-color="#426543"
      pagination-unselected-color="#808080"
      auto-play="3000"
    >
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" style="width: 100vw" />
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" style="width: 100vw" alt="" />
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" style="width: 100vw" alt="" />
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" style="width: 100vw" alt="" />
      </nut-swiper-item>
    </nut-swiper>
  </view>
  <view
    ><nut-noticebar
      text="发发单积分商城活动热烈进行中!"
      :background="`rgba(251, 248, 220, 1)`"
      :custom-color="`#D9500B`"
    ></nut-noticebar
  ></view>
  <view
    ><nut-grid>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item>
      <nut-grid-item text="文字"><nut-icon name="dongdong" /></nut-grid-item> </nut-grid
  ></view>
  <view>
    <nut-card
      :img-url="obj.imgUrl"
      :title="obj.title"
      :price="obj.price"
      :vipPrice="obj.vipPrice"
      :shopDesc="obj.shopDesc"
      :delivery="obj.delivery"
      :shopName="obj.shopName"
    ></nut-card>
    <nut-card
      :img-url="obj.imgUrl"
      :title="obj.title"
      :price="obj.price"
      :vipPrice="obj.vipPrice"
      :shopDesc="obj.shopDesc"
      :delivery="obj.delivery"
      :shopName="obj.shopName"
    ></nut-card>
    <nut-card
      :img-url="obj.imgUrl"
      :title="obj.title"
      :price="obj.price"
      :vipPrice="obj.vipPrice"
      :shopDesc="obj.shopDesc"
      :delivery="obj.delivery"
      :shopName="obj.shopName"
    ></nut-card>
    <nut-card
      :img-url="obj.imgUrl"
      :title="obj.title"
      :price="obj.price"
      :vipPrice="obj.vipPrice"
      :shopDesc="obj.shopDesc"
      :delivery="obj.delivery"
      :shopName="obj.shopName"
    ></nut-card>
    <nut-card
      :img-url="obj.imgUrl"
      :title="obj.title"
      :price="obj.price"
      :vipPrice="obj.vipPrice"
      :shopDesc="obj.shopDesc"
      :delivery="obj.delivery"
      :shopName="obj.shopName"
    ></nut-card>
    <nut-card
      :img-url="obj.imgUrl"
      :title="obj.title"
      :price="obj.price"
      :vipPrice="obj.vipPrice"
      :shopDesc="obj.shopDesc"
      :delivery="obj.delivery"
      :shopName="obj.shopName"
    ></nut-card>
    <nut-card
      :img-url="obj.imgUrl"
      :title="obj.title"
      :price="obj.price"
      :vipPrice="obj.vipPrice"
      :shopDesc="obj.shopDesc"
      :delivery="obj.delivery"
      :shopName="obj.shopName"
    ></nut-card
  ></view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const title = ref("Hello");
const page = ref(2);
const state = ref({
  options1: [
    { text: "全部商品", value: 0 },
    { text: "新款商品", value: 1 },
    { text: "活动商品", value: 2 },
  ],
  options2: [
    { text: "默认排序", value: "a" },
    { text: "好评排序", value: "b" },
    { text: "销量排序", value: "c" },
  ],
  value1: 0,
  value2: "a",
});

const handleChange = (val) => {
  console.log("val", val);
};
const navList = ref([
  {
    id: 1,
    text: "首页",
    icon: "https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png",
  },
  {
    id: 2,
    text: "分类",
    icon: "https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png",
  },
  {
    id: 3,
    text: "购物车",
    num: 2,
    icon: "https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png",
  },
  {
    id: 4,
    text: "我的",
    icon: "https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png",
  },
]);
const obj = ref({
  imgUrl:
    "//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg",
  title: "活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水",
  price: "388",
  vipPrice: "378",
  shopDesc: "自营",
  delivery: "厂商配送",
  shopName: "阳澄湖大闸蟹自营店>",
});
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
